<script setup lang='ts'>
import myHeader from './components/Header/index.vue'
import navBar from './components/NavBar/index.vue'
import MainContent from './components/Main/index.vue'
import ColorTest from './utils/test.vue'
import PacManTest from './utils/Pacman.vue'
import Channel from './components/ChannelCommend/index.vue'
import PaletteBtn from './components/PaletteBtn/index.vue'
import { onMounted, ref } from 'vue'

const btnInnerRef = ref<HTMLElement>()
const btnLeft = ref(0)
const showTop = ref(0)
const setBtnLeft = () => {
  let innerWidth = btnInnerRef.value?.clientWidth as number
  btnLeft.value = innerWidth + (btnInnerRef.value?.offsetLeft as number)
}
const onGetOffsetTop = (top: number) => {
  showTop.value = top
}
onMounted(() => {
  setBtnLeft()

  window.addEventListener('resize', () => {
    setBtnLeft()
  })
})
</script>
<template>
  <div>
    <my-header></my-header>
    <nav-bar></nav-bar>
    <main-content></main-content>
    <div class="main-container">
      <channel @getOffsetTop="onGetOffsetTop"></channel>
      <div class="palette-btn-inner" ref="btnInnerRef">
        <palette-btn :btnLeft="btnLeft" :showTop="showTop"></palette-btn>
      </div>
    </div>
  </div>


</template>
<style lang='less' scoped>
@media screen and (min-width:1501px) and (max-width:2199px) {
  :deep(.main-container) {
    max-width: 1750px;
    padding: 0 140px;
    margin: 0 auto;
  }
}

@media screen and (min-width:1401px) and (max-width:1500px) {
  :deep(.main-container) {
    padding: 0 70px;
    margin: 0 auto;
  }
}

@media screen and (min-width:1101px) and (max-width:1400px) {
  :deep(.main-container) {
    padding: 0 70px;
    margin: 0 auto;
  }
}

@media screen and (min-width:1001px) and (max-width:1100px) {
  :deep(.main-container) {
    padding: 0 30px;
    margin: 0 auto;
  }
}

@media screen and (max-width:1000px) {
  :deep(.main-container) {
    padding: 0;
    min-width: 1000px;
    margin: 0 auto;
  }
}


:deep(.icon) {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

:deep(.clearfix) {
  zoom: 1;

  &::after {
    content: "";
    clear: both;
    height: 0;
    line-height: 0;
    visibility: hidden;
    display: block;
  }
}

.palette-btn-inner {
  width: 100%;
  height: 100%;
}
</style>